<template>
  <div class="detail">
    <!--    头部组件-->
    <Tophead :title=this.$common.location>
      <router-link class="icon-back" to="/"></router-link>
    </Tophead>
    <!--    中间部分进行 条件渲染不同的组件-->
    <!--    首先渲染图表部分-->
    <Table v-if="isSeleced === 'table'"></Table>
    <Charts v-else-if="isSeleced === 'charts'"></Charts>
    <Cad v-else-if="isSeleced === 'cad'"></Cad>
    <station v-else-if="isSeleced === 'linkStatus'"></station>
    <Papers v-else-if="isSeleced === 'papers'"></Papers>
    <!--    底部菜单导航-->
    <FooterBar @navChange="changeNav"></FooterBar>
  </div>
</template>

<script>
//引入头部组件
import Tophead from "@/components/TopHead";
import FooterBar from "@/components/FooterBar";
import Charts from "@/components/Charts";
import Cad from "@/components/Cad";
import Station from "@/components/Station";
import Table from "@/components/Table";
import Papers from "@/components/Papers";

export default {
  name: "Detail",
  components: {Station, Cad, Charts, FooterBar, Tophead,Table,Papers},
  data() {
    return {
      isSeleced : 'table'
    }
  },
  created() {

  },
  methods: {
    changeNav(name) {
      //将底部导航栏（子组件）中的selected值传至detail（父页面）
      this.name = name;
      this.isSeleced=this.name
    }
  },
  computed: {}
}
</script>

<style lang="scss" scoped>
@import "../assets/style/main";

.detail {
  display: flex;
  flex-direction: column;
  height: 100%;
}

</style>